<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理员页面</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="/css/element/index.css">
    <!-- import Vue before Element -->
    <script src="/js/vue.js"></script>
    <!-- import JavaScript -->
    <script src="/js/element/index.js"></script>
    <!--axios-->
    <script src="/js/axios.min.js"></script>
    <style>
        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }

        .el-aside {
            background-color: whitesmoke;
            color: #333;
            text-align: center;
            line-height: 200px;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            line-height: 60px;
            padding-top: 0px;
            padding-bottom: 0px;
            overflow: hidden;
        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }

        /**/
        .el-row {
            margin-bottom: 20px;

        &
        :last-child {
            margin-bottom: 0;
        }

        }
        .el-col {
            border-radius: 4px;
        }

        .bg-purple-dark {
            background: #99a9bf;
        }

        .bg-purple {
            background: #d3dce6;
        }

        .bg-green {
            background: green;
        }

        .bg-red {
            background: red;
        }

        .bg-purple-light {
            background: #e5e9f2;
        }

        .grid-content {
            height: 150px;
            border-radius: 4px;
            min-height: 36px;
        }

        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }
    </style>
</head>
<body style="margin: 0">
<div id="app">
    <el-container>
        <el-header style="padding-left: 0;padding-right: 0">
            <!--导航栏-->
            <el-menu :default-active="'1'"
                     class="el-menu-demo"
                     mode="horizontal"
                     background-color="#545c64"
                     text-color="#fff"
                     active-text-color="#ffd04b">
                <el-menu-item index="1" onclick="javascript:location.href='../index.html'">首页</el-menu-item>
                <el-menu-item index="2" onclick="javascript:location.href='../myreserve.html'">我的预约</el-menu-item>
                <el-menu-item index="3" disabled>消息中心</el-menu-item>
                <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">访问官网</a></el-menu-item>
            </el-menu>
        </el-header>

        <el-container>
            <el-aside width="15%"></el-aside>
            <el-main>
                <el-alert title="以下功能可能会修改用户车位数据，请谨慎操作" type="warning" show-icon></el-alert>
                <el-divider></el-divider>
                <!--栅格-->
                <!--表格行数由parkingSpaceList长度决定，当length能被8整除则行数为length/8，否则为length/8 注意v-for遍历数字从1开-->
                <el-row :gutter="20"
                        v-for="i in parkingSpaceList.length % 8 == 0? parkingSpaceList.length/8+1 : parkingSpaceList.length/8+2">
                    <el-col v-for="(item, index) in parkingSpaceList.slice(8*(i-1), 8*(i-1) + 8)" :span="3">
                        <!--一行显示8个单元格-->
                        <div class="grid-content" v-bind:class="item.locked?'bg-red':'bg-green'">
                            编号：<strong>{{item.id}}</strong><br/>
                            <strong>{{statusType[item.status]}}</strong>
                        </div>
                    </el-col>
                </el-row>

                <el-divider></el-divider>
                <el-row :gutter="20">
                    <el-col :offset="3" :span="9">
                        <el-input v-model="id" type="number" clearable>
                            <template slot="prepend">目标车位编号</template>
                        </el-input>
                    </el-col>
                    <el-col :span="10" align="left">
                        <el-button type="warning" v-on:click="lock(id)" icon="el-icon-lock">锁定目标车位</el-button>
                        <el-button type="warning" v-on:click="unlock(id)" icon="el-icon-unlock">解锁目标车位</el-button>
                    </el-col>
                </el-row>
                <el-divider></el-divider>
                <el-button type="danger" v-on:click="lockAll" icon="el-icon-lock">锁定所有车位</el-button>
                <el-button type="danger" v-on:click="unlockAll" icon="el-icon-unlock">解锁所有车位</el-button>
                <el-divider direction="vertical"></el-divider>
                <el-button type="primary" v-on:click="exit">退出登录</el-button>
            </el-main>
            <el-aside width="15%"></el-aside>
        </el-container>

        <el-footer>© 2020 中国地质大学（武汉） .Powered by CUG. | 服务器状态 | Donate</el-footer>
    </el-container>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            id: null,
            statusType: ['空闲', '占用', '被预定', '管理员锁定'],
            parkingSpaceList: []
        },
        methods: {
            findAll: function () {
                var that = this;
                axios.get("/park").then(
                    function (response) {
                        that.parkingSpaceList = response.data;
                    },
                    function (err) {
                        console.log(err);
                    }
                );
            },
            lock: function (id) {
                if (this.id == null || this.id == "") {
                    this.showMessage('warning', "请输入id号");
                    return;
                }
                var that = this;
                axios({
                    method: "post",
                    url: "/admin/lock",
                    params: {id: id}
                }).then(function (response) {
                    that.showMessage('info', response.data.msg);
                }, function (err) {
                    console.log(err);
                });
            },
            unlock: function (id) {
                if (this.id == null || this.id == "") {
                    this.showMessage('warning', "请输入id号");
                    return;
                }
                var that = this;
                axios({
                    method: "post",
                    url: "/admin/unlock",
                    params: {id: id}
                }).then(function (response) {
                    that.showMessage('info', response.data.msg);
                }, function (err) {
                    console.log(err);
                });
            },
            lockAll: function () {
                var that = this;
                axios({
                    method: "post",
                    url: "/admin/lockAll",
                }).then(function (response) {
                    that.showMessage('info', response.data.msg);
                }, function (err) {
                    console.log(err);
                });
            },
            unlockAll: function () {
                var that = this;
                axios({
                    method: "post",
                    url: "/admin/unlockAll",
                }).then(function (response) {
                    that.showMessage('info', response.data.msg);
                }, function (err) {
                    console.log(err);
                });
            },
            exit: function () {
                var that = this;
                axios.get("/admin/exit").then(function (response) {
                    if (response.data.flag) {
                        window.location.href = "/login.html";
                    } else {
                        that.showMessage('warning', response.data.msg);
                    }
                }, function (err) {
                    console.log(err);
                });
            },
            showMessage: function (type, message) {
                this.$message({message: message, type: type});
            }
        }
    });
    window.onload = app.findAll;

    var ip_addr = document.location.hostname;//服务器ip地址
    //使用websocket显示实时车位信息
    var websocket = null;
    if ('WebSocket' in window) {
        websocket = new WebSocket("ws://" + ip_addr + ":8080/ws/park");

        //连接发生错误的回调方法
        websocket.onerror = function () {
            console.log("WebSocket连接发生错误");
        };

        //连接成功建立的回调方法
        websocket.onopen = function () {
            console.log("WebSocket连接成功");
        }

        //接收到消息的回调方法
        websocket.onmessage = function (event) {
            console.log(event.data);
            var jsonObj = JSON.parse(event.data);//把接收的json字符串转为对象
            app.parkingSpaceList.splice(jsonObj.id - 1, 1, jsonObj);//修改数组值要用splice，这里表示将索引为1开始的一个元素修修改为response.data
        }

        //连接关闭的回调方法
        websocket.onclose = function () {
            console.log("WebSocket连接关闭");
        }

        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = function () {
            websocket.close();
        }
    } else {
        alert("浏览器不支持websocket");
    }

    // 发送消息
    // function send() {
    //     var message = document.getElementById('text').value;
    //     websocket.send(message);
    // }
</script>
</body>
</html>